import React, { Component } from 'react'
import { getNew, getSuperSeckill, getSeckill, getGoodsInfo, cartAdd, getCountDown } from '../../request/api'
export default class Home extends Component {
  constructor() {
    super()
    this.state = {
      newPeople: [],//新人专享
      superSec: [],
      seckill: [],
      recommend: [{ content: [] }, { content: [] }, { content: [] }],
      arr: [["热销好货", "限量抢购"], ["折上折区", "不买就亏"], ["时令水果", "当季限定"], ["粮油调味", "一键购齐"]],
      selectIndex: 0,
      coutDown: 0,
      emptyFlag: 0,
      shijian: {
        h: "",
        m: "",
        s: ""
      }
    }
  }
  getTime(end) {
    let shijian = {
      h: "",
      m: "",
      s: ""
    }
    let time = JSON.parse(end) - (new Date())
    shijian.h = Math.floor((time / (1000 * 60 * 60)) % 24)
    shijian.m = Math.floor((time / (1000 * 60)) % 60);
    shijian.s = Math.floor((time / 1000) % 60);
    this.state.shijian = { ...shijian }
  }
  componentDidMount() {
    if(this.state.coutDown===0){
      console.log(this.state.coutDown);
      getCountDown().then(res => {
        if (res.code === 200) {
          console.log(res)
          this.state.countDown = JSON.parse(res.list[0].endtime)
          this.state.emptyFlag = 1
        }
      })
    }


    this.timer = setInterval(() => {
      this.getTime(this.state.countDown)
      // this.state.countDown -= 1000;
      this.setState({
        shijian: this.state.shijian
      })
    }, 1000);

    getNew().then(res => {
      if (res.code === 200) {
        this.setState({ newPeople: res.list })
      }
    })
    getSuperSeckill().then(res => {
      if (res.code === 200) {
      }
    })
    getSeckill().then(res => {
      if (res.code === 200) {
        this.setState({ seckill: res.list })
      }
    })

    getSuperSeckill().then(res => {
      if (res.code === 200) {
        this.setState({ superSec: res.list })
      }
    })

    getGoodsInfo().then(res => {
      if (res.code === 200) {
        this.setState({ recommend: res.list })
        // setTimeout(() => {
        //   console.log(this.state.recommend);
        // }, 1000);
      }
    })
  }

  componentWillUnmount(){
    clearInterval(this.timer)
}
  changeClass(index) {
    this.setState({ selectIndex: index })
  }

  addCart(id, type) {
    let uid = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).uid : []
    let data = {
      uid,
      type,
      goodsid: id,
      num: 1
    }

    cartAdd(data).then(res => {
      console.log(res);
      if (res.code === 200) {
        console.log(res);
        alert("购物车添加成功")
      } else {
        alert(res.msg)
      }
    })
  }
  toCoupon(){
    this.props.history.push("/coupon")
  }
  render() {
    const { newPeople, seckill, arr, selectIndex, recommend, superSec, shijian,emptyFlag } = this.state;
    return (
      <div className="home">
        {/* 顶部搜索 */}
        <div className="top-search">
          <div className="w">
            <div className="top">
              <i className="iconfont icon-address_icon"></i>
              <img src="/images/pic/logo/white.png" alt=""></img>
              <form className="search">
                <i className="iconfont icon-magnifier"></i>
                <input type="search" placeholder="按内容搜索" />
              </form>

              <i className="iconfont icon-shangdian"></i>
            </div>

          </div>
        </div>
        {/* 新人专享 */}
        <div className="newPeople" style={{ width: "100vw", height: "3.8rem", background: "URL(/images/bg3.png)", backgroundSize: "cover" }}>
          <div className="top">
            <div className="l">
              <div className="lInner">
                <h1>新人专享</h1>
                <span className="time">{shijian.h}</span>
                <span className="dot">:</span>
                <span className="time">{shijian.m}</span>
                <span className="dot">:</span>
                <span className="time">{shijian.s}</span>
              </div>
              <div className="rInner">
                <a href="#">查看全部&gt;</a>
              </div>
            </div>
            <div className="r"></div>
          </div>
          <div className="main">
            <div className="oneGift">
              <span className="redButton">一重礼</span>
              <span className="wz">信任特价商品专区 (限量供应，先到先得)</span>
            </div>
            <div className="goods">
              <ul>
                {
                  newPeople.map((item,index) => (

                    <li key={index}>
                      <div className="imgPic">
                        <img src={this.$pregImg + item.img} alt="" />
                      </div>
                      <div className="box">
                        <div className="bl">
                          <p className="p1">&yen;{item.price}</p>
                          <p className="p2">&yen;{item.market_price}</p>
                        </div>
                        <div className="br">
                          <div className="shopCart" onClick={() => this.addCart(item.id, 1)}>
                            <i className="iconfont icon-gouwuchekong"></i>
                          </div>
                        </div>
                      </div>

                    </li>


                  ))
                }



              </ul>
            </div>
          </div>
          <div className="doubleGift">
            <div className="oneGift">
              <span className="redButton">二重礼</span>
              <span className="wz">新人通用50元礼券(下单立减，省了又省)</span>
            </div>
            <div className="quan">
              <div className="pic1">
                <img src="/images/quan.png" alt=""  onClick={()=>this.toCoupon()}/>
              </div>
              <div className="pic2">
                <img src="/images/quan2.png" alt="" onClick={()=>this.toCoupon()}/>
              </div>
            </div>
          </div>
        </div>

        {/* 列表 */}
        <div className="banner2">
          <ul>
            <li>
              <a >
                <img src="/images/icon/index/kingkong/seckill.png" alt="" />
                <span>限时秒杀</span>
              </a>
            </li>
            <li>
              <a >
                <img src="/images/icon/index/kingkong/top.png" alt="" />
                <span>畅销商品</span>
              </a>
            </li>
            <li>
              <a >
                <img src="/images/icon/index/kingkong/brand.png" alt="" />
                <span>品质大牌</span>
              </a>
            </li>
            <li>
              <a >
                <img src="/images/icon/index/kingkong/selfsupport.png" alt="" />
                <span>小U自营</span>
              </a>
            </li>
            <li>
              <a >
                <img src="/images/icon/index/kingkong/integral.png" alt="" />
                <span>积分商城</span>
              </a>
            </li>
          </ul>
        </div>

        {/* 超级秒杀 */}
        <div className="seckill">
          <div className="top">
            <div className="l">
              <div className="lInner" v-if={emptyFlag}>
              
                <h1>超级秒杀</h1>
                <span className="time">{shijian.h}</span>
                <span className="dot">:</span>
                <span className="time">{shijian.m}</span>
                <span className="dot">:</span>
                <span className="time">{shijian.s}</span>
              </div>
            </div>
          </div>

          <div className="box">

            {
              superSec.map((item,index) => (


                <div className="main" key={index}>
                  <div className="l">
                    <img src={this.$pregImg + item.img} alt="" />
                  </div>
                  <div className="r">
                    <div className="redButton">7.9折</div>
                    <p className="p">{item.goodsname}</p>
                    <div className="bar">
                      <div className="tiao">
                      </div>
                      <span className="percent">30%</span>
                    </div>
                    <div className="qiang">
                      <img src="/images/qiang.png" alt="" onClick={() => this.addCart(item.id, 2)} />
                      <span className="sp1" className="sp1">&yen;{item.price}</span><span className="sp2">&yen;{item.market_price}</span>
                    </div>
                  </div>
                </div>



              ))
            }

          </div>




        </div>


        {/* 限时秒杀 */}
        <div className="xianshi">
          <div className="oneGift">
            <span className="yellowButton">限时秒杀</span>
            <span className="wz">信任特价商品专区 (限量供应，先到先得)</span>
          </div>
          <div className="goods">
            <ul>

              {
                seckill.map((item,index) => (


                  <li key={index}>
                    <div className="imgPic">
                      <img src={this.$pregImg + item.img} alt="" />
                    </div>
                    <div className="box">
                      <div className="bl">
                        <p className="p1">&yen;{item.price}</p>
                        <p className="p2">&yen;{item.market_price}</p>
                      </div>
                      <div className="br">
                        <div className="shopCart" onClick={() => this.addCart(item.id, 1)}>
                          <i className="iconfont icon-gouwuchekong"></i>
                        </div>
                      </div>

                    </div>

                  </li>



                ))
              }


            </ul>
          </div>
        </div>





        {/* <!-- banner4 --> */}
        <div className="banner4">
          <div className="inner">
            <div className="pre-buy">
              <div className="top">双11尖货预购</div>
              <div className="goods1">
                <img src="/images/paking.jpg" alt="" />
              </div>
            </div>
            <div className="globle">
              <div className="top">畅购全球</div>
              <div className="goods1">
                <img src="/images/banana.jpg" alt="" />
                <img src="/images/tomato.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>

        {/*热销好货  */}
        <div className="hotGoods">
          <ul>
            {
              arr.map((item, index) => (
                <li key={index} onClick={() => this.changeClass(index)} >
                  <p className={index === selectIndex ? "p1" : ""}>{item[0]}</p>
                  <div className={index === selectIndex ? "redButton" : ""}>{item[1]}</div>
                </li>

              ))
            }


          </ul>

        </div>

        {/*  热销好货列表*/}
        <div className="hotGoodsList">
          {
            recommend[selectIndex].content.map((item,index) => (
              <div className="row" key={index}>
                <div className="l">
                  <img src={this.$pregImg + item.img} alt="" />
                </div>
                <div className="r">
                  <div className="redButton">7.9折</div>
                  <p className="p">溪牧原山茶花洁面乳精选太行山最...</p>
                  <div className="prop">
                    <img src="/images/biaoqian.png" alt="" />
                    <span className="wz1">直降198元</span>
                    <span className="wz2">限购一件</span>
                  </div>
                  <div className="box">
                    <div className="lInner">
                      <p className="p1">&yen;1.99</p>
                      <p className="p2">&yen;199.00</p>
                    </div>
                    <div className="rInner">
                      <div className="redButton">加入购物车</div>
                    </div>
                  </div>
                </div>


              </div>


            ))
          }



        </div>

        <br /><br /><br /><br /><br />

      </div>
    )
  }
}
